<template>
  <view :style="pageStyle">
    <uni-nav-bar
      backgroundColor="transparent"
      color="#000000"
      :border="false"
      :statusBar="true"
      fixed
      leftWidth="0rpx"
      rightWidth="0rpx"
      title="111"
      :custom-bg-style="{
        // background: stickyFix
        //   ? `pink url(${VUE_APP_STATIC_URL}ui-static/zwx-static/circle-category/pageBg.png) no-repeat center top`
        //   : 'transparent',
        background: `pink url(${VUE_APP_STATIC_URL}ui-static/zwx-static/circle-category/pageBg.png) no-repeat center top`,
        backgroundSize: '100% auto',
      }"
    >
      <template v-slot>
        <view class="flex items-center navbar-center overflow" style="line-height: 88rpx;width: 770rpx;text-align: center">
          <!-- <image :src="`${VUE_APP_STATIC_URL}ui-static/img/logo.jpg`" style="height: 60rpx" mode="heightFix"></image> -->
          <image :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/logo-staging-black.png`" style="width: 376rpx" mode="widthFix"></image>
        </view>
      </template>
    </uni-nav-bar>
    <!--    <global-loading />-->

    <view class="container">
      <u-sticky :offset-top="stickyOffsetTop" bg-color="transparent" z-index="999" @fixed="stickyFix = true" @unfixed="stickyFix = false">
        <view style="padding-bottom: 20rpx">
          <view class="search_box only_overflow border-box relative" @click="$jump(`/zwx_category_page1/search/index/index`)">
            <u-search :placeholder="searchPlaceholder" v-model="searchKeyword" :clearabled="false" placeholder-color="#9F9F9F" :show-action="false" bg-color="#fff" search-icon-color="#9F9F9F" readonly :input-style="{ fontSize: '26rpx' }"></u-search>
            <u-button
              :custom-style="{
                position: 'absolute',
                right: '5rpx',
                top: '50%',
                transform: 'translateY(-50%)',
                color: '#fff',
                fontSize: '26rpx',
                width: '139rpx',
                height: '55rpx',
                background: `linear-gradient(90deg, #FF9000, #FF5000)`,
                borderRadius: '28rpx',
              }"
            >
              搜索
            </u-button>
          </view>
        </view>
      </u-sticky>
      <view class="content">
        <!-- 分类中心 -->
        <scroll-view scroll-y class="left-aside">
          <view v-for="(item, index) in flist" :key="item.classifyId" class="f-item b-b" :class="{ active: index === currentIndex }" @click="tabtap(item, index)">
            {{ item.classifyName }}
          </view>
        </scroll-view>
        <scroll-view scroll-with-animation scroll-y class="right-aside">
          <view v-for="item in slist" :key="item.classifyId" class="s-list">
            <view class="classBox" v-if="item.childs.length > 0">
              <text class="s-item">{{ item.classifyName }}</text>
            </view>
            <view class="t-list">
              <view @click="navToList(item.classifyId, titem.classifyId)" class="t-item" v-for="titem in item.childs" :key="titem.classifyId">
                <image :src="titem.classifyImage" class="pic-img default-img"></image>
                <text class="name">{{ titem.classifyName }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view v-if="ifEmpty" class="emptyOrder-box flex-items-plus flex-column">
          <image class="emptyOrder-img" :src="`${VUE_APP_STATIC_URL}ui-static/img/bgnull.png`"></image>
          <label class="font-color-999 fs26 mar-top-30">该分类没有商品～</label>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, inject } from "vue";
import { useStore } from "vuex";
import { request } from "@/utils/request";
import API from "@/config/api";
import { VUE_APP_STATIC_URL } from "@/config/api";

const $jump = inject("$jump");

const sizeCalcState = ref(false);
const tabScrollTop = ref(0);
const currentIndex = ref(0);
const currentId = ref("");
const flist = ref([]);
const slist = ref([]);
const ifEmpty = ref(false);

const loadData = async () => {
  try {
    const res = await request(
      API.FindCategoryListByDepth,
      {
        classifyId: "",
      },
      "GET"
    );
    flist.value = res.data;
    currentId.value = flist.value[0].classifyId;
    uni.hideLoading();
    await getChildCategory();
  } catch (err) {
    uni.hideLoading();
    throw Error(err);
  }
};

const getChildCategory = async () => {
  try {
    const res = await request(
      API.FindCategoryListByDepth,
      {
        classifyId: currentId.value,
      },
      "GET"
    );
    uni.hideLoading();
    slist.value = res.data;
    if (slist.value.length === 0) {
      ifEmpty.value = true;
    }
  } catch (err) {
    uni.hideLoading();
    throw Error(err);
  }
};

const tabtap = async (item, index) => {
  ifEmpty.value = false;
  currentIndex.value = index;
  currentId.value = item.classifyId;
  await getChildCategory();
};

//右侧栏滚动
const asideScroll = e => {
  if (!sizeCalcState.value) {
    calcSize();
  }
  let scrollTop = e.detail.scrollTop;
  let tabs = slist.value.filter(item => item.top <= scrollTop).reverse();
  if (tabs.length > 0) {
    currentId.value = tabs[0].pid;
  }
};
//计算右侧栏每个tab的高度等信息
const calcSize = () => {
  let h = 0;
  slist.value.forEach(item => {
    let view = uni.createSelectorQuery().select("#main-" + item.id);
    view
      .fields(
        {
          size: true,
        },
        data => {
          item.top = h;
          h += data.height;
          item.bottom = h;
        }
      )
      .exec();
  });
  sizeCalcState.value = true;
};

const navToList = (sid, tid) => {
  uni.navigateTo({
    url: `/zwx_category_page1/goodsModule/goodsList?category3Id=${tid}&classifyLevel=3`,
  });
};

onMounted(() => {
  loadData();
});

const store = useStore();
const navBarHeight = computed(() => store.state.globalSetting.appSetting.navBarHeight);
const pageStyle = computed(() => ({
  height: "100%",
  overflowY: "hidden",
  backgroundColor: "#F5F3F1",
  backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/circle-category/pageBg.png)`,
  backgroundSize: "100% auto",
  backgroundRepeat: "no-repeat",
}));

const stickyFix = ref(false);
// #ifndef H5
var stickyOffsetTop = ref(navBarHeight.value * 2);
// #endif
// #ifdef H5
var stickyOffsetTop = ref(0);
// #endif

const searchKeyword = ref("");
const searchPlaceholder = ref("请输入关键词");
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid #f3f4f5ff;
}
.logo {
  width: 280rpx;
  height: 42rpx;
}

.content {
  display: flex;
}
.left-aside {
  flex-shrink: 0;
  width: 180upx;
  height: 100vh;
  background-color: #f8f8f8;
}
.f-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100upx;
  font-size: 28upx;
  color: $font-color-base;
  position: relative;
  &.active {
    // color: $base-color;
    color: #ff5000;
    background: linear-gradient(180deg, #fff 0%, #fffcf7 50%, #ffeed3 100%);
  }
}

.right-aside {
  flex: 1;
  padding: 20upx 0 20upx 0;
  height: 100vh;
}
// .s-item {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   height: 70upx;
//   padding-top: 8upx;
//   font-size: 28upx;
//   color: $font-color-dark;
// }
.t-list {
  display: flex;
  flex-wrap: wrap;
  width: 516rpx;
  margin: auto;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: #fff;
  padding: 24rpx 8rpx;
  &:after {
    content: "";
    flex: 99;
    height: 0;
  }
  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 12rpx;
  }
  .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }
}
.t-item {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 166upx;
  font-size: 26upx;
  color: #666;
  padding-bottom: 20upx;

  image {
    width: 148upx;
    height: 148upx;
  }
}
.emptyOrder-box {
  width: 100%;
  //margin-left: 180upx;
  .emptyOrder-img {
    margin-top: -130upx;
    width: 113upx;
    height: 98upx;
  }
}
.classBox {
  width: 516rpx;
  margin: auto;
  .s-item {
    font-family: Source Han Sans CN VF;
    height: 70upx;
    line-height: 70upx;
    font-weight: 500;
    font-size: 28rpx;
    color: #3b3b3b;
  }
}

.search_box {
  width: 690rpx;
  margin: 0 30rpx;
  border: 2px solid #ff5000;
  border-radius: 32rpx;
}

::v-deep .uni-nav-bar-text {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Source Han Sans CN VF;
  font-weight: 500;
  font-size: 38rpx;
}
</style>
